<template>
  <view>
    <view v-if="cartList.length > 0">
      <!-- 下面语法就是html里面的 条件编译 -->
      <!-- #ifdef H5 -->
          <view>我是在浏览器端显示</view>
      <!-- #endif -->
      <!-- #ifdef MP-WEIXIN -->
          <view>微信小程序</view>
      <!-- #endif -->
      
    <!-- 商品列表渲染 -->
      <view class="goods-list">
        <view class="cart-item" v-for="(item, index) in cartList" :key="item.goods_id">
          <!-- radio 小程序组件库自带的 -->
          <radio :checked="item.goods_select" @click="radioClick(item.goods_id)" color="#EB4450" />
          <view class="cart-count">
            <u-number-box :value="item.goods_count" max="5" :name="item.goods_id" @change="countChange" @overlimit="overlimitFn($event, index)" />
          </view>
          <!-- hover-class="none" 取消链接组件按下时的灰色样式 -->
          <navigator
            class="goods-item"
            hover-class="none"
            :url="`/pages/index/index`"
          >
            <!-- 商品图片 -->
            <image
              class="goods-image"
              :src="item.goods_small_logo"
              mode="aspectFit"
            />
            <!-- 商品信息 -->
            <view class="goods-info">
              <view class="goods-name">{{ item.goods_name }}</view>
              <view class="goods-price">{{ item.goods_price }}</view>
            </view>
          </navigator>
        </view>
      </view>
      <!-- 底部操作栏占位 -->
      <view class="bottom-bar">
        <!-- 固定定位的操作栏  -->
        <view class="bottom-bar-fixed">
          <view class="select">
            <radio class="select-radio" @click="allSelectFn" :checked="isAllSelected" color="#EB4450">
              全选
            </radio>
            <text class="select-radio"></text>
          </view>
          <!-- 合计 -->
          <view class="total">
            <text class="total-name">合计：</text>
            <text class="total-price">{{ totalPrice }}</text>
          </view>
          <!-- 结算 -->
          <view class="account" @click="goToPay">去结算({{ totalCount }})</view>
        </view>
      </view>
    </view>
    <u-empty
      v-else
      mode="car"
      icon="http://cdn.uviewui.com/uview/empty/car.png">
      <navigator url="/pages/category/index" open-type="switchTab">
        <u-button type="primary"  text="去选择商品"></u-button>
      </navigator>
    </u-empty>
  </view>
</template>

<script>
import {mapState, mapGetters} from 'vuex'
export default {
  computed: {
    // 先要准备一个本地独立地址的 购物车列表数组数据， 深拷贝
    // ...mapState(['cartList'])
    ...mapState({
      cartList: state => JSON.parse(JSON.stringify(state.cartList))
    }),
    ...mapGetters(['isAllSelected', 'selectGoodsList', 'totalCount', 'totalPrice'])
  },
  onLoad(){
    // 下面的语法叫js的条件编译
    // #ifdef H5
      console.log('web端 购物车数据：', this.cartList);
    // #endif

    // #ifdef MP-WEIXIN
      console.log('小程序端');
    // #endif
  },
  methods: {
    // 数量修改
    countChange(e) {
      // console.log(e);
      // 先从购物车数组里面找到 当前的商品对象
      // npm run serve 用浏览器的方式查看(可以看vuex)
      // npm run dev:mp-weixin 用小程序的方式查看
      const currentItem = this.cartList.find(item=> item.goods_id === e.name)
      currentItem.goods_count = e.value

      this.$store.commit('addCartMutation', this.cartList)
    },
    // 状态修改
    radioClick(id) {
      console.log(id);
      const currentItem = this.cartList.find(item => item.goods_id === id)
      currentItem.goods_select = !currentItem.goods_select

      this.$store.commit('addCartMutation', this.cartList)
    },
    // 超过阈(yu)值。 一般的项目还有左滑右滑的操作去删除，我们是数量减到了1在删除
    overlimitFn(e, index) {
      console.log(e, index);
      if(e === 'minus') { // plus
        // 只要进了这个if就可以删除商品，打开一个弹出框了  this.cartList
        uni.showModal({
          title: '提示',
          content: '是否要删除该商品',
          success: (res) => {
            if(res.confirm) {
              this.cartList.splice(index, 1)

              this.$store.commit('addCartMutation', this.cartList)
            }
          }
        })
      }
    },
    // 全选按钮点击触发的事件
    allSelectFn() {
      // this.isAllSelected = !this.isAllSelected
      // console.log(this.isAllSelected);
      this.cartList.forEach(item => {
        // this.isAllSelected 这个值是计算属性，是不好改，如果硬要改计算属性，就要写get set的形式。 这里只能用 计算属性的值 this.isAllSelected
        item.goods_select = !this.isAllSelected
      })

      this.$store.commit('addCartMutation', this.cartList)
    },
    goToPay() {
      // if(this.selectGoodsList.length > 0) {
      //   uni.navigateTo({
      //     url: '/pages/pay/index'
      //   })
      // } else {
      //   uni.showToast({
      //     title: '请勾选商品再去结算',
      //     icon: 'none'
      //   })
      // }
      if(this.selectGoodsList.length > 0) {
        uni.navigateTo({
          url: '/pages/pay/index'
        })
        return
      }
      uni.showToast({
        title: '请勾选商品再去结算',
        icon: 'none'
      })
    }
  }
}
</script>

<style lang="scss">
// 商品列表
.goods-list {
  .goods-item {
    display: flex;
    padding: 25rpx;
    .goods-image {
      width: 190rpx;
      height: 190rpx;
    }
    .goods-info {
      flex: 1;
      font-size: 24rpx;
      // 垂直方向两端对齐
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 20rpx;
      .goods-name {
        // 多行超出隐藏
        overflow: hidden;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
      }
      .goods-price {
        color: #eb4450;
        // 前面的价格符号
        &::before {
          content: '￥';
          font-size: 80%;
          margin-right: 5rpx;
        }
      }
    }
  }
}
// 购物车列表项
.cart-item {
  display: flex;
  align-items: center;
  padding-left: 20rpx;
  border-bottom: 1rpx solid #ddd;
  position: relative;
  // 清除最后一项的底边
  &:last-child {
    border-bottom: none;
  }
  // 步进器外层盒子，定位实现
  .cart-count {
    position: absolute;
    // 体验优化细节：扩大盒子范围，防止用户误操作
    // background-color: pink;
    padding: 20rpx;
    bottom: 0;
    right: 0;
  }
}

// 底部操作栏
.bottom-bar {
  // 占位用
  height: 100rpx;
  // 定位的操作栏
  .bottom-bar-fixed {
    height: 80rpx;
    position: fixed;
    z-index: 99;
    left: 0;
    right: 0;
    bottom: 0;

    border-top: 1px solid #eee;
    background-color: #fff;
    display: flex;
    align-items: center;
    padding: 0 20rpx;

    .select {
      .select-radio {
        font-size: 24rpx;
        color: #999;
      }
    }

    .total {
      flex: 1;
      display: flex;
      align-items: center;
      margin-left: 40rpx;
      .total-name {
        font-size: 24rpx;
      }

      .total-price {
        color: #eb4450;
      }
    }

    .account {
      background-color: #eb4450;
      color: #fff;
      font-size: 22rpx;
      width: 150rpx;
      height: 52rpx;
      border-radius: 26rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}

// 下面的代码叫 css的条件编译， 注释的写法要用 /*
/* #ifdef H5 */
.bottom-bar .bottom-bar-fixed {
  bottom: 50px
}
/* #endif */

/* #ifdef MP-WEIXIN */
.bottom-bar .bottom-bar-fixed {
  bottom: 0
}
/* #endif */
</style>